<html>
	<head>
		<title>Working With Data</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
		<style>
			#dialog { min-width: 200px; }
		</style>
	</head>
	<body class="claro">
		<input id="sql" />
		<button id="runSQL" type="button"></button>
		<input id="python" />
		<button id="runPython" type="button"></button>
		<div id="grid"></div>
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src="/getJS?item=createMenu"></script>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/MultiSelect", "dijit/form/SimpleTextarea", "dijit/form/TextBox", "dijit/Dialog", "dijit/registry", "dojox/grid/DataGrid", "dojo/store/Memory",
				"dojo/data/ObjectStore", "dojo/dom", "dojo/request", "dojo/_base/window", 
				"dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", "dijit/MenuBarItem", 
				"dojo/domReady!"], 
				function(ready, BorderContainer, ContentPane, Button, MultiSelect, SimpleTextarea, TextBox, Dialog, registry,
					DataGrid, Memory, ObjectStore, dom, request, win, MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, MenuBarItem){
					ready(function(){
						parameters = dojo.queryToObject(dojo.doc.location.search.substr((dojo.doc.location.search[0] === "?" ? 1 : 0)))
						var bc = new BorderContainer({style: "height: 900px; width: 1200px"});
						var operationPane = new ContentPane({
							region: "trailing",
							style: "width: 25%; height: 95%;",
							content: ""});
						var centerPane = new ContentPane({
							region: "center",
							style: "width: 50%; height:95%;",
							content: ""});
						var runPane = new ContentPane({
							region: "center",
							content: ""});
						var dataPane = new ContentPane({
							region: "center",
							style: "height: 50%;",
							content: ""});
						var topPane = new ContentPane({
							region: "top",
							style: "height: 5%",
							content: createMenu(request, JSON).domNode})
							
						bc.addChild(topPane);
						

						var operations = new MultiSelect({
							name: "operations"}, "opertations");
						var sql = new SimpleTextarea({
							name: "sql",
							rows: "10",
							cols: "100",
							style: "width: auto; heigth 100%;",
							value: "test"}, "sql");
						var python = new SimpleTextarea({
							name: "python",
							rows: "10",
							cols: "100",
							style: "width: auto; heigth 100%;",
							value: "test"}, "python");
						var runSQL = new Button({
							label: "Run SQL",
							style: "width: 10%;",
							onClick: function() {
								command("runSQL", {table: "", code: sql.value});
								console.log("test");
							}
						}, "runSQL");
						var runPython = new Button({
							label: "Run Python",
							style: "width: 10%;",
							onClick: function() {
								console.log("test");
							}
						}, "runPython");
						var saveSQL = new Button({
							label: "Save SQL",
							style: "width: 10%;",
							onClick: function() {
								var text = new TextBox({
									name: "sqlName",
									placeholder: "SQL Operation Name"}, "sqlName");
								var ok = new Button({
									label: "OK",
									onClick: function(){
										command("saveSQL", {name: text.value, opType:"sql", operation: sql.value});
									}});
								var dialog = new Dialog({
									title: "Save Operation",
									content: [text.domNode, ok.domNode]});
								dialog.show();
							}
						}, "saveSQL");
						var savePython = new Button({
							label: "Save Python",
							style: "width: 10%",
							onClick: function() {
								var text = new TextBox({
									name: "pythonName",
									placeholder: "Python Operation Name"}, "pythonName");
								var ok = new Button({
									label: "OK",
									onClick: function(){
										command("savePython", {name: text.value, opType:"python", operation: python.value});
									}});
								var dialog = new Dialog({
									title: "Save Operation",
									content: [text.domNode, ok.domNode]});
								dialog.show();
							}
						}, savePython);
						
						function command(type, value){
							request.post("operations", {
								data: {
									opType: type,
									value: value
								},
								handleAs: "json"}).then(function(){
								
								});
						}
						
						function grid(){
							grid = new DataGrid({
								style: "height: 100%; width: 50%",
								structure: [
								{
										noscroll: true,
										defaultCell: { width: "84px" },
										cells: [
											{ name: "First Name", field: "first" },
											{ name: "Last Name", field: "last" }
										]
									}
								]
							}, "grid");
							return grid;
						}
						dataGrid = grid();
						dataGrid.startup();
						dataPane.set("content", [dataGrid.domNode]);
						runPane.set("content", [runSQL.domNode, runPython.domNode, saveSQL.domNode, savePython.domNode]);
						operationPane.set("content", [operations.domNode]);
						centerPane.set("content", [
							runPane.domNode,
							sql.domNode,
							python.domNode,
							dataPane.domNode]);
                        getOperations(operations);
                        function getOperations(widget){
                            request.post("operationsList", {
                                handleAs: "json"}).then(function(data){
                                    var attr = dom.byId("operations");
                                    console.log(data);
                                    for (var i = 0; i < data.length; i++){
                                        record = data[i];
                                        console.log(record);
                                        var add = win.doc.createElement('option');
                                        add.innerHTML = record;
                                        add.value = record;
                                        attr.appendChild(add);
                                    }
                                });
                            }
						function getData(type, value, widget){
							request.post("table", {
								data: json.stringify({
									type: type,
									value: value}),
								handleAs: "json"}).then(function(data){
								
								});
						}
						bc.addChild(operationPane);
						bc.addChild(centerPane);
						console.log(bc);
						document.body.appendChild(bc.domNode);
						bc.startup();
					});
				});
		</script>
	</body>
</html>
